<template>
	<view class="home">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true" class="swiper">
			<swiper-item v-for="swiper in swiperList" :key="swiper.goods_id" @click="onSwiperClicked"
				:data-swiperid="swiper.goods_id">
				<view class="swiper-item">
					<image :src="swiper.image_src" class="swiper-cover" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 导航 -->
		<view class="nav-list">
			<view class="nav-item" v-for="nav in navList" :key="nav.name" @click="onNavClicked(nav)">
				<image :src="nav.image_src" class="nav-cover"></image>
			</view>
		</view>

		<!-- 楼层 -->
		<view class="floor-list">
			<view class="floor-item" v-for="floorItem in floorList" :key="floorItem.floor_title.name">
				<floor-item :floorItem="floorItem"></floor-item>
			</view>
		</view>





	</view>
</template>

<script>
	import {
		getSwiperList,
		getNavList,
		getFloorList
	} from '../../service/home_api.js'

	import FloorItem from '../../components/FloorItem/FloorItem.vue'
	
	import BadgeMixin from '../../mixins/badge-mixin.js'
	
	
	export default {
		mixins: [BadgeMixin],
		data() {
			return {
				swiperList: [],
				navList: [],
				floorList: []
			}
		},
		components: {
			FloorItem
		},
		methods: {
			onSwiperClicked(event) {
				const swiperid = event.currentTarget.dataset.swiperid
				uni.navigateTo({
					url: `/subpkg/goods-detail/goods-detail?goods_id=${swiperid}`
				})
			},

			onNavClicked(nav) {
				const name = nav.name
				if (name === '分类') {
					uni.switchTab({
						url: '/pages/cate/cate'
					})
				}
			},
		},

		onLoad() {
			getSwiperList().then(res => {
				if (res.meta.status === 200) {
					this.swiperList = res.message
				} else {
					return uni.$showMsg()
				}
			})

			getNavList().then(res => {
				if (res.meta.status === 200) {
					this.navList = res.message
				} else {
					return uni.$showMsg()
				}
			})

			getFloorList().then(res => {
				if (res.meta.status === 200) {
					// 数据过滤
					res.message.forEach(floorItem => {
						floorItem.product_list.forEach(p => {
							p.url = '/subpkg/goods-list/goods-list?' + p.navigator_url.split('?')[
								1]
						})
					})
					console.log(res.message);
					this.floorList = res.message
				} else {
					return uni.$showMsg()
				}
			})


		}
	}
</script>

<style lang="scss">
	.swiper {
		.swiper-item {
			width: 100%;
			.swiper-cover {
				width: 100%;
			}
		}
	}

	.nav-list {
		display: flex;
		justify-content: space-around;
		margin-top: 22rpx;
		text-align: center;

		.nav-item {
			flex: 1;

			.nav-cover {
				width: 128rpx;
				height: 144rpx;
			}
		}
	}
</style>
